{% extends "global/Page.html" %}
{#上面那个会压紧样式 先注释掉#}
{% load otree static %}

{% block title %}
{% endblock %}
{% block content %}

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="{% static 'css/sweetalert.css' %}">
        <script type="text/javascript" src="{% static 'js/sweetalert-dev.js' %}"></script>
        <style type="text/css">
            .text {
                color: black;
                text-align: center;
                display: flex;
                margin-top: 20px;
                height: 10vh !important;
                justify-content: center;
                align-items: center;
                font-size: 25px;
                line-height: 28px;
                margin-top: 50px;
            }

            .btn {
                display: block;
                margin: 0 auto;
                width: 180px;
                height: 85px;
                border-radius: 4px;
                border: none;
                transition: all 0.5s;
                cursor: pointer;
                /* vertical-align: middle; */
                font-size: 32px;
                margin-top: 50px;
                background: rgb(57, 92, 128);
            }

            .btn span {
                cursor: pointer;
                display: inline-block;
                position: relative;
                transition: 0.5s;
                color: aliceblue;
            }

            .btn span:after {
                content: '>>';
                position: absolute;
                opacity: 0;
                top: 5px;
                right: -20px;
                transition: 0.5s;
            }

            .btn:hover span {
                padding-right: 40px;
            }

            .btn:hover span:after {
                opacity: 1;
                right: 0;
            }

            table {
                width: 70%;
                margin: 20px auto;
                font-size: 27px;
                /* border: 2px solid black; */
            }

            #sumTime {
                font-size: 29px;
                font-weight: 700;
            }

            th {
                text-align: right;
                display: none;
            }

            .td {
                height: 50px;
                border: 1px solid black;
            }

            input {
                width: 80px;
                height: 30px;
                font-size: 25px;
                background: rgb(228, 225, 225);
                border: 0.5px solid black;
                box-shadow: 3px 3px 1px rgb(126, 126, 124);
                border-radius: 3px;
                margin: 3px;
                cursor: pointer;
            }

            button {
                width: 90px;
                height: 40px;
                font-size: 17px;
                background-color: rgb(181, 176, 176);
                cursor: pointer;
                margin-top: 15px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
                var btn = document.getElementById("btn");
                btn.onclick = function () {
                    var divset = document.getElementsByTagName("td");
                    divset[1].style.display = "block";
                    divset[2].style.display = "block";
                    divset[3].style.display = "table-cell";
                    divset[4].style.display = "table-cell";

                    for (var i = 0; i < divset.length; i++) {
                        divset[i].style.display = "table-cell";
                        divset[i].removeAttribute("hidden");
                    }
                    ;
                    var btn = document.getElementById("btn");
                    btn.style.display = "none";
                    var sumTime = document.getElementById("sumTime");
                    var time = 60;
                    var timer = setInterval(function () {
                        time = time - 1;
                        var minute = parseInt(time / 60);
                        var second = parseInt(time % 60);
                        {#sumTime.innerHTML='距比赛结束还剩'+minute+'分'+second+'秒';#}
                        sumTime.innerHTML = '距比赛结束还剩' + second + '秒';
                        if (minute == 0 && second == 0) {
                            clearInterval(timer);
                            submit.click();

                        }
                    }, 1000);

                    var submit = document.getElementById("submit");
                    submit.onclick = function () {
                        clearInterval(timer);
                        {#swal("提交成功!");#}
                    }
                }
            }
        </script>
    </head>
    <body>
    <div class="container">
        <div class="text">
            <p>
            <p>计算题比赛——请完成20道计算题</p></p>
        </div>
        {#        所有不是用于提交的表单都要加上 type="button"#}
        <button type="button" class="btn" id="btn">
            <span>开始比赛</span>
        </button>

        <table>
            <td id="sumTime" colspan='2' hidden style="text-align: right;">
                {#              <b>限时：5分00秒</b>#}
                <b>限时：60秒</b>
            </td>
            <tr>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_41 }}+{{ subsession.RandomNumber_42 }}=</span>
                    <input name="answer_21" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_43 }}+{{ subsession.RandomNumber_44 }}=</span>
                    <input name="answer_22" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
            </tr>
            <tr>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_45 }}+{{ subsession.RandomNumber_46 }}=</span>
                    <input name="answer_23" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_47 }}+{{ subsession.RandomNumber_48 }}=</span>
                    <input name="answer_24" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
            </tr>
            <tr>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_49 }}+{{ subsession.RandomNumber_50 }}=</span>
                    <input name="answer_25" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_51 }}+{{ subsession.RandomNumber_52 }}=</span>
                    <input name="answer_26" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
            </tr>
            <tr>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_53 }}+{{ subsession.RandomNumber_54 }}=</span>
                    <input name="answer_27" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_55 }}+{{ subsession.RandomNumber_56 }}=</span>
                    <input name="answer_28" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
            </tr>
            <tr>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_57 }}+{{ subsession.RandomNumber_58 }}=</span>
                    <input name="answer_29" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_59 }}+{{ subsession.RandomNumber_60 }}=</span>
                    <input name="answer_30" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
            </tr>
            <tr>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_61 }}+{{ subsession.RandomNumber_62 }}=</span>
                    <input name="answer_31" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_63 }}+{{ subsession.RandomNumber_64 }}=</span>
                    <input name="answer_32" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
            </tr>
            <tr>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_65 }}+{{ subsession.RandomNumber_66 }}=</span>
                    <input name="answer_33" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_67 }}+{{ subsession.RandomNumber_68 }}=</span>
                    <input name="answer_34" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
            </tr>
            <tr>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_69 }}+{{ subsession.RandomNumber_70 }}=</span>
                    <input name="answer_35" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_71 }}+{{ subsession.RandomNumber_72 }}=</span>
                    <input name="answer_36" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
            </tr>
            <tr>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_73 }}+{{ subsession.RandomNumber_74 }}=</span>
                    <input name="answer_37" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_75 }}+{{ subsession.RandomNumber_76 }}=</span>
                    <input name="answer_38" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
            </tr>
            <tr>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_77 }}+{{ subsession.RandomNumber_78 }}=</span>
                    <input name="answer_39" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
                <td class="td" hidden>
                    <span>{{ subsession.RandomNumber_79 }}+{{ subsession.RandomNumber_80 }}=</span>
                    <input name="answer_40" type="text" maxlength="4" onkeyup="value=value.replace(/[^\d]/g,'')">
                </td>
            </tr>

            <tr>
                <td colspan='2' style="text-align: center;" hidden>
                    <button type="submit" id="submit">立即提交</button>
                </td>
            </tr>
        </table>
    </div>
    </body>
    </html>



{% endblock %}




